<template>
  <view class="order" v-if="data">
    <text class="order-title">购课信息</text>
    <view class="order-card">
      <view class="card-info">
        <view class="card-info-left">
          <view class="card-info-title">
            <text class="card-info-h1">{{ data.title }}</text>
            <text class="tag">{{ data.type == 0 ? '初训' : '复训' }}</text>
          </view>
          <!-- <view class="card-info-txt">
            <view class="iconfont icon-weikaishi1">
            </view>
            <text>上课时间：{{ data.hour }}课时 </text>
          </view> -->
          <view class="card-info-txt">
            <view class="iconfont icon-dingwei">
            </view>
            <text>{{ config.name }}</text>
          </view>
        </view>
        <text class="price">{{ data.price }}</text>
      </view>
      <!-- <view class="card-info">
        <view class="card-info-left">
          <view class="card-info-title">
            <text class="card-info-h1">溶化焊接预热切割作业</text>
            <text class="tag">初训</text>
          </view>
          <view class="card-info-txt">
            <view class="iconfont icon-weikaishi1">
            </view>
            <text>上课时间：48课时 09:00-18:00</text>
          </view>
          <view class="card-info-txt">
            <view class="iconfont icon-dingwei">
            </view>
            <text>中山市企安校区</text>
          </view>
        </view>
        <text class="price">¥2000</text>
      </view> -->
      <view class="sale">
        <text>优惠信息</text>
        <view class="sale-txt">
          优惠:<text>暂无</text>
        </view>
      </view>
      <view class="total">
        <text style="margin-right: 8rpx;">共计1门课程，小计</text>
        <text style="font-size: 28rpx;color: #2A2C31;font-weight: 700;">¥</text>
        <text class="num">{{ data.price }}</text>
      </view>
    </view>
    <view class="pay-type order-card">
      <text class="title">支付方式</text>
      <view class="wechat">
        <view class="iconfont icon-weixinzhifu">
        </view>
        <text>微信支付</text>
      </view>
    </view>
    <view class="order-bottom">
      <text class="btm-total">共计1门课程</text>
      <view class="right">
        <view class="price">
          <view class="price-top">
            <text>总计：</text>
            <text class="icon">¥</text>
            <text class="rmb">{{ data.price }}</text>
          </view>
          <!-- <text class="price-btm">共减:¥200</text> -->
        </view>
        <view @click="pay" class="btn-pay">
          立即支付
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  placeOrder,
  payOrderWithWXPay
} from '@/http/exam.js'
import {
  getOrderDetail
} from '@/http/order.js'
export default {
  data() {
    return {
      courseId: '',
      data: null,
      order: null,
      userinfo: {},
      config: {}
    }
  },
  onLoad(options) {
    this.userinfo = uni.getStorageSync('userinfo')
    this.courseId = options.id
    this.config = uni.getStorageSync('config')[0] || {}
    this.loadData()
  },
  methods: {
    loadData() {
      this.data = uni.getStorageSync('courseItem')
      console.log(this.data);
    },
    loadOrderDetail() {
      getOrderDetail({
        orderId: this.orderId
      }).then(res => {
        this.order = res.data
      })
    },
    pay() {
      uni.showLoading({
        title: '购买中...',
        mask: true
      })
      placeOrder({
        courseId: this.courseId
      }).then(res => {
        this.order = res.data
        // if(this.order.paymentStatus == 0 ){
        //   return uni.showModal({
        //     title: '提示',
        //     content: '订单已存在，请查看订单',
        //     confirmText: '查看订单',
        //     showCancel: false,
        //     success: (res) => {
        //       uni.redirectTo({
        //         url: `/pages/order/info?orderId=${this.order.orderId}`
        //       })
        //     }
        //   })
        // }
        payOrderWithWXPay({
          orderId: this.order.orderId,
          courseId: this.courseId,
          openId: this.userinfo.wechatOpenid
        }).then(res => {
          // return
          let payData = {
            timeStamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.packageValue,
            signType: res.data.signType,
            paySign: res.data.paySign,
            appId: res.data.appId,
            // orderId: this.data.orderId
          }
          uni.requestPayment({
            provider: 'wxpay',
            ...payData,
            success: (res) => {
              uni.hideLoading()
              uni.showToast({
                title: '支付成功',
                icon: 'success',
                duration: 1500,
                success: () => {
                  uni.redirectTo({
                    url: '/pages/order/orderPay?orderId=' + this.order.orderId
                  })
                }
              })

            },
            fail: (err) => {
              uni.hideLoading()
              uni.showToast({
                title: '支付失败',
                icon: 'error'
              })
            }
          })
        })
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  background: linear-gradient(180deg, #fc3826FF, #f49d95FF);
  background-size: 100% 450rpx;
  background-repeat: no-repeat;
  background-color: #F7F6F9;
}

.order {
  padding-top: 50rpx;
}

.order-title {
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  display: block;
  margin-bottom: 20rpx;
  margin-left: 35rpx;
}

.order-card {
  background: #FFFFFF;
  box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(137, 135, 142, 0.09);
  border-radius: 10rpx;
  margin: 35rpx;
}

.card-info {
  padding: 30rpx;
  display: flex;
  border-bottom: 4rpx solid #F2F2F2FF;

  .card-info-left {
    flex: 1;

    .card-info-title {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .card-info-h1 {
        font-weight: 700;
        font-size: 32rpx;
        color: #12141A;
      }

      .tag {
        margin-left: 25rpx;
        padding: 0 25rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: #FDF7F2;
        border-radius: 4rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #F47900;
      }
    }

    .card-info-txt {
      font-weight: 400;
      font-size: 26rpx;
      color: #525355;
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .iconfont {
        margin-right: 5rpx;
        color: #8e929b;
        font-size: 34rpx;
      }
    }
  }

  .price {
    font-weight: 500;
    font-size: 36rpx;
    color: #12141A;
  }
}

.sale {
  padding: 30rpx 35rpx;
  font-weight: 500;
  font-size: 26rpx;
  color: #525355;
  display: flex;
  justify-content: space-between;

  .sale-txt {
    text {
      font-weight: 700;
      font-size: 30rpx;
      color: #FD3523;
    }
  }
}

.total {
  padding: 0 35rpx 40rpx 35rpx;
  font-weight: 500;
  font-size: 26rpx;
  color: #525355;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;

  .num {
    font-weight: 700;
    font-size: 46rpx;
    color: #2A2C31;
  }
}

.pay-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35rpx;

  .title {
    font-weight: 700;
    font-size: 32rpx;
    color: #12141A;
  }

  .wechat {
    display: flex;
    align-items: center;
    font-size: 32rpx;

    .iconfont {
      font-size: 56rpx;
      color: #1cab43;
      margin-right: 10rpx;
    }
  }
}

.order-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
  align-items: baseline;

  .btm-total {
    font-weight: 500;
    font-size: 26rpx;
    color: #AFAFAF;
    margin-left: 30rpx;
  }

  .right {
    display: flex;
    margin-right: 30rpx;

    .price {
      display: flex;
      // flex-direction: column;
      // align-items: flex-end;
    }

    .price-top {
      text {
        font-size: 26rpx;
        color: #525355;
      }

      .icon {
        font-weight: 700;
        font-size: 28rpx;
        color: #FD3523;
      }

      .rmb {
        font-size: 46rpx;
        color: #FD3523;
        font-weight: 700;
      }
    }

    .price-btm {
      font-size: 24rpx;
      color: #FD3523;
    }

    .btn-pay {
      margin-left: 40rpx;
      width: 260rpx;
      height: 85rpx;
      line-height: 85rpx;
      text-align: center;
      background: #FD3523;
      border-radius: 10rpx;
      font-weight: 700;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>